<template>
    <div class="app-container">
        <!-- 查询功能 -->
        <el-form :inline="true" :model="query" size="mini">
            <el-form-item label="文章标题:">
                <el-input v-model.trim="query.title"></el-input>
            </el-form-item>
            <el-form-item label="状态:">
                <el-select v-model="query.status" clearable filterable>
                    <el-option label="未审核" :value="1"></el-option>
                    <el-option label="审核通过" :value="2"></el-option>
                    <el-option label="审核未通过" :value="3"></el-option>
                    <el-option label="已删除" :value="0"></el-option>
               </el-select>
            </el-form-item>
            <el-form-item>
                <el-button icon="el-icon-search" type="primary" @click="queryData">查询</el-button>
                <el-button  icon="el-icon-refresh" @click="reload">重置</el-button>
            </el-form-item>
        </el-form>
        <!-- 表格主体 -->
         <el-table :data="list" stripe style="width: 100%">
            <el-table-column  label="序号" width="60" type="index"></el-table-column>
            <el-table-column prop="title" align="center" label="文章标题"></el-table-column>
            <el-table-column prop="viewCount" label="浏览量"></el-table-column>
            <el-table-column prop="thumhup" label="点赞数"></el-table-column>
            <el-table-column prop="ispublic" label="是否公开">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.ispublic === 0" type="danger">不公开</el-tag>
                    <el-tag v-if="scope.row.ispublic === 1" type="success">公开</el-tag>    
                </template>
            </el-table-column>
            <el-table-column prop="status" label="状态">
                <template slot-scope="scope">    
                    <!-- // 0: 已删除, 1:未审核，2:已审核,3: 审核未通过                 -->
                    <el-tag v-if="scope.row.status === 0" type="danger">已删除</el-tag>
                    <el-tag v-if="scope.row.status === 1" >未审核</el-tag> 
                    <el-tag v-if="scope.row.status === 2" type="success">已审核</el-tag>
                    <el-tag v-if="scope.row.status === 3" type="info">审核未通过</el-tag>   
                </template>
            </el-table-column>
            <el-table-column prop="updateDate" label="最后更新时间" min-width="90px">
                <template slot-scope="scope">
                    {{getFormat(scope.row.updateDate)}}
                </template>
            </el-table-column>
            <el-table-column  label="操作" align="left" width="210" >
                 <template slot-scope="scope">
                     <!-- 审核：只有status ===1 的时候才显示，其他不显示
                          删除：只有status != 0的时候才显示 其他不显示 -->
                          
                    <el-button type="primary"  @click="openView(scope.row.id)" size="mini">查看</el-button>
                    <el-button v-if="scope.row.status === 1" type="success" @click="openAudit(scope.row.id)" size="mini">审核</el-button>
                    <el-button v-if="scope.row.status !=0" type="danger"  @click="handleDelete(scope.row.id)" size="mini">删除</el-button>
                </template>
            </el-table-column>            
        </el-table>

         <!-- 分页功能 -->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.current"
            :page-sizes="[10, 20, 50]"
            :page-size="page.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total">
        </el-pagination>

        <!-- 弹出窗口 -->
         <audit :id="audit.id" :isAudit="audit.isAudit" :title="audit.title" :visible="audit.visible" :remoteClose="remoteClose"></audit>
    </div>
</template>

<script>
import api from '@/api/article'
//格式化日期
import {format} from '@/utils/date'
import Audit from '../article/audit'
export default {
    name:"Artivle",
    components:{
        Audit
    },
    data(){
        return{
            list:[],
            page:{
                current:1,
                size:20,
                total:0
            },
            query:{}, //查询条件
            audit:{ //审核子组件传递的对象属性
                title:"",
                visible:false,
                id:null,  //文章的ID
                isAudit:true, //是否打开的是审核页面，true为审核，false为查看审核压面
            }
        }
    },
    created(){
        this.fetchData()
    },
    methods:{
        async fetchData(){
           const {data} = await api.getList(this.query,this.page.current,this.page.size)
           this.list = data.records
           this.page.total = data.total
        },
        //组件模板中调用此方法格式化日期
        getFormat(date){
            return format(date)
        },
        //当每页显示多少条改变后触发
        handleSizeChange(val){
            this.page.size = val
            this.fetchData()
        },
        handleCurrentChange(val){
            this.page.current = val
            this.fetchData()
        },
        //条件查询方法
        queryData(){
            this.page.current = 1
            this.fetchData()            
        },
        //刷新重置
        reload(){
            this.query = {}
            this.fetchData()
        },
        //打开审核窗口
        openAudit(id){
            //指定文章ID
            this.audit.id = id
            this.audit.isAudit = true
            this.audit.title = "审核文章"
            this.audit.visible = true
        },
        //关闭窗口
        remoteClose(){
            this.audit.visible = false
            this.fetchData()
        },
        //查看详情
        openView(id){
            //指定文章ID
            this.audit.id = id
            //标识为查看详情页
            this.audit.isAudit = false
            this.audit.title = "文章详情"
            this.audit.visible = true
        },
        //删除文章功能
        handleDelete(id){
             //审核通过            
            this.$confirm('确认删除该文章吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                //发送审核通过请求
               api.deleteById(id).then(res =>{
                   this.$message({
                       type:"success",
                       message:"删除成功"
                   })
               })
               //关闭弹窗
               this.remoteClose()
            }).catch(() => {
                //取消删除
            });
        }
    }
}
</script>

<style scoped>

</style>
